/**
 * Created by 游永年 on 2019-01-19 11:31.
 * 多个标签选择器
 * data 如果会卡,移入constructor一次构造,一般不会,因为页面东西太少了,不用过于考虑性能问题
 */

'use strict'
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import style from './RadioGroup.less';
import {Flex, Radio} from "antd-mobile";

class RadioGroup extends Component {
  static defaultProps = {
    type: 'one',
  }

  render() {
    const {data = [], children = ""} = this.props;

    return (
      <div className={style.tagContainer}>
        <div className={`${style.label} am-input-label am-input-label-5`}>
          {children}
        </div>
        <div className={style.input}>
          {data.map(({name, value}) => {
              const c = this.checkSelect(value);
              return <Flex.Item style={{marginTop: '15px'}} key={name + ''}
                                className={`${style.tag}`}
              >
                <Radio checked={c} onChange={_ => this.onChange(value)}>{name}
                </Radio>
              </Flex.Item>
            }
          )
          }
        </div>
      </div>
    );
  }

  checkSelect = val => {
    const {value} = this.props;
    return value === val;
  }

  onSearch = (val) => {
    this.props.dispatch({type: 'home/search', val});
  }

  onChange = (newVal) => {
    const {onChange} = this.props;
    onChange(newVal);
  }
}

RadioGroup.propTypes = {
  onChange: PropTypes.func,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
  type: PropTypes.oneOf(['one', 'multi']),//单选还是多选
  data: PropTypes.array,//数据项[{name,value}]
};

export default RadioGroup;

